<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="isShow"
    :width="handleScreenWidthToVw(574) + 'px'"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-form :model="companyForm" :rules="formRules" label-width="100px">
      <el-form-item label="企业名称:" prop="name">
        <el-input v-model="companyForm.name" placeholder="请输入企业名称"></el-input>
      </el-form-item>
      <el-form-item label="组织关联:" prop="orgName">
        <el-select v-model="companyForm.orgName" placeholder="请选择组织">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属行业:" prop="name">
        <el-select v-model="companyForm.industry" placeholder="请选择行业">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式:" prop="name"></el-form-item>
      <el-form-item label="企业介绍:" prop="remark"></el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="handleSubmit">提交</el-button>
      <el-button size="small" @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { handleScreenWidthToVw } from '@/utils/tools'
export default {
  props: {
    isShow: { type: Boolean, default: false },
    dialogTitle: { type: String, default: '新建档案-园区企业' },
    companyData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      companyForm: { name: '', industry: '', orgName: '' },
    }
  },
  computed: {
    formRules() {
      return {
        name: [{ require: true, message: '企业名称不能为空', trigger: ['blur', 'change'] }],
        orgName: [{ require: true, message: '请绑定组织', trigger: 'change' }],
      }
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    handleClose() {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    padding: vh(20px) vw(120px);
  }

  .el-select {
    width: 100%;
  }
}
</style>
